var thid;
class Tab {

    constructor(id) {
        thid = this;
        // 获取大盒子 最外层div
        this.main = document.querySelector(id);
        // 获取下面的测试标签页  也就是li
        this.lis = this.main.querySelectorAll('li');
        //console.log(this.lis); //NodeList(3) [ li.liactive, li, li ]
        this.sections = this.main.querySelectorAll('section')

        //console.log(this.sections); //NodeList(3) [ section.conactive, section, section ]
        this.add = this.main.querySelector('.tabadd');
        this.ul = this.main.querySelector('.fisrstnav ul:first-child');
        this.fsection = this.main.querySelector('.tabscon');

        // 需要放在方法上面 不然执行init()方法以后就不会往下继续执行了

        this.init();


    }
    init() {
        // 初始操作 让相关元素绑定事件
        this.updateNode();  //单独拎出来 没啥意义 就是方便用   让lis重新绑定一次新建出来的li
        this.add.onclick = this.addTab;  //给全局add绑定点击事件
        for (var i = 0; i < this.lis.length; i++) {  //给lis添加可选择索引
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;  //给每个索引添加点击事件
            // 当我点了一下这个onclick 就会执行 toggleTab函数 这里不能加括号 加了就算我不点击也会自动执行  (加了以后会一直让界面转圈)
            this.remove[i].onclick = this.removeTab;
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;

            // this.sectionHTML[i].onclick = this.editTab1;


        }

    }

    // 因为我们动态添加元素 需要从新获取对应的元素
    updateNode() {
        this.lis = this.main.querySelectorAll('li');                  //所有li标签 也就是测试
        //获取所有li  querySelectorAll() 获取所有class = ??的标签
        this.sections = this.main.querySelectorAll('section');          //所有测试块内的内容标签
        // console.log(this);  全局obj
        this.remove = this.main.querySelectorAll('.icon-guanbi');         //所有关闭按钮标签  
        // 创建icon-guanbi的操作符 获取所有关闭按钮
        this.spans = this.main.querySelectorAll('.fisrstnav ul span:first-child');   //所有li的span标签


    }

    // 切换功能
    toggleTab() {
        //console.log(this); //<li class="liactive">
        //console.log(this.index);  //这里是测试该功能的回馈
        thid.clearClass();  // 自动执行该函数 因为这个函数是在类里的  所以需要吧this改成变量(thid)
        this.className = 'liactive';        //  (===li.className).这里的this是指li的liactive  因为调用是lis的循环计数i 而liactive是li的类 
        //这一步是为了给选中的li添加 liactive类
        thid.sections[this.index].className = 'conactive';  //给选中的section字节添加conactive类  
        //这里用thid是因为这个方法(toggleTab())是li的this 如果用this会显示未定义或者空
        // 而sections是Foo类的属性.所以需要用Foo定义的变量this(thid)替换. this.index是lis[i]就已经定义了 所以用这个代表第几个并无问题

    }
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            // console.log(this);  //这里的this还是class全局Tab对象
            this.lis[i].className = ""   //这里很好理解了 全局的lis的[i]的class删除
            this.sections[i].className = ""  //全局的sections的[i]的class删除

        }

    }
    //添加功能
    addTab() {

        thid.clearClass();   //先执行方法 把所有lis和sections的类都清空
        // console.log("1111");  //测试会不会执行 
        var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';  //自带liactive类 默认添加后选择
        var section = '<section class="conactive">测试 ' + '</section>';  //自带conactive类 默认添加后选择
        // console.log(this);  //<div class="tabadd">  查看一下当前this是哪个  这里因为init方法有add.onclick时间引用了addTab 而add是类"tabadd
        thid.ul.insertAdjacentHTML('beforeend', li);  //(翻译:插入相邻HTML)   需要选择一个被插入的元素的父元素.如li需要插入到ul
        // 可选项
        // 'beforebegin'：元素自身的前面。
        // 'afterbegin'：插入元素内部的第一个子节点之前。
        // 'beforeend'：插入元素内部的最后一个子节点之后。
        // 'afterend'：元素自身的后面。
        thid.fsection.insertAdjacentHTML('beforeend', section); //注释同上
        thid.init();  //执行该方法是为了让新建的元素重新绑定如点击 选择等事件


    };
    //删除功能
    removeTab(event) {
        event.stopPropagation();
        //event函数自带的默认参数
        //stopPropagation是event的属性 这里的意思是停止冒泡行为
        // console.log("测试所有按钮"); //true
        // console.log(this);  // 这里的this是icon-guanbi
        let index = this.parentNode.index;

        thid.lis[index].remove();
        thid.sections[index].remove();
        thid.init();

        let index1 = thid.lis.length - 1;
        // 获取最高索引
        // console.log(index1);
        thid.lis[index1].className = 'liactive';
        thid.sections[index1].className = 'conactive';

    }
    // 修改功能
    editTab() {
        let str = this.innerHTML;
        console.log(str);
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = '<input type="text">'
        let input = this.children[0];
        console.log(this);
        // children返回所有元素的合集 如返回ul内所有的li
        input.value = str;
        // str内容赋值给input的value
        input.select();
        // 让文字处于蓝色选定状态
        input.onblur = function () {
            this.parentNode.innerHTML = this.value;
            // 小练习 失去焦点后判断输入的内容符不符合要求 如密码需要带一个大写或者数字 不符合要求就在旁边弹出一个提示说不符合要求
        }
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur();

            }

        }

    }

    editTab1() {
        console.log("222");
    }
}

// 这里的this是span  往下一切操作都是从span开始的
// 创建str变量保存当前span的html值
// 因为稍后要修改span的html值 所以要先创建一个变量去移走这个原来的值

// 重新给span的子元素赋值html字符 后设置成文本框输入
// 创建一个变量 获取span元素合集的第一个索引 此时的this也就是span包含三个元素合集
//0: <input type="text">
//length: 1
//value: "测试2"
//这里的children[0]只需要获取第一个input去修改就可以了
// input的value此时是的空的 需要str去给他原来的数据 也就是相当于双击过后保存原来的数据
// input.select() 是为了双击过后保持文本框字体蓝色的选定状态 算是优化体验的一步
// onblur 失去焦点时触发函数. 函数内容很简单
// onblur里面的this是'<input type="text">' 父元素操作符让原本是文本框的代码变成了他的父元素的html 也就是span的内部代码  
// this.value这里的this还是'<input type="text">'   value是我们刚才输入的内容 这个赋值操作符就会让刚才输入的内容修改给span的html



// 实例化类
new Tab('#tab');


